<template>
  <div class="app-preset-smsverification">
    <div class="content">
      <i-input
        size="default"
        :value="value"
        type="text"
        :placeholder="placeholder"
        @on-blur="onBlur"
      ></i-input>
      <el-button
        :disabled="disabled"
        size="mini"
        type="primary"
        @click="getVeriCode()"
        >{{ getTips() }}</el-button
      >
    </div>
    <span v-if="phoneError" class="error">{{ phoneErrorText }}</span>
  </div>
</template>

<script lang='ts'>
import { Vue, Component, Prop, Model } from "vue-property-decorator";
import { Http } from "ibiz-core";

@Component({})
export default class AppPresetSmsVerification extends Vue {
  /**
   * 短信验证码
   *
   * @type {*}
   * @memberof AppPreSetInput
   */
  @Prop() public value!: string;

  /**
   *名称
   *
   * @type {*}
   * @memberof AppPreSetInput
   */
  @Prop() public name!: string;

  /**
   * 倒计时
   *
   * @type {*}
   * @memberof Login
   */
  public countDown: number = 60;

  /**
   * 错误提示
   *
   *
   */
  public phoneError = false;

  /**
   * 提示信息
   *
   *
   */
  public phoneErrorText = "手机号不正确";

  /**
   * 是否禁用获取验证码按钮
   *
   * @type {*}
   * @memberof Login
   */
  public disabled: boolean = false;

  /**
   * 占位文本
   *
   * @type {string}
   * @memberof AppPreSetInput
   */
  public placeholder?: string = "请输入手机号";

  /**
   * @description 网络请求接口对象
   * @type {IHttp}
   * @memberof Login
   */
  public http: any = Http.getInstance();

  /**
   * @description 设置倒计时
   * @memberof AppLogin
   */
  public setCountDown() {
    if (this.countDown > 0) {
      this.countDown--;
    } else {
      this.countDown = 60;
      this.disabled = false;
      clearInterval(this.timer);
    }
    this.$forceUpdate();
  }

  /**
   * 定时器
   *
   * @type {*}
   * @memberof Login
   */
  public timer: any;

  /**
   * @description 校验手机号
   * @param {string} id 手机号
   * @memberof AppLogin
   */
  public veriPhoneNumber(phone: string): boolean {
    if (!/^1[34578]\d{9}$/.test(phone)) {
      return false;
    }
    return true;
  }

  /**
   * @description 获取验证码
   * @memberof AppLogin
   */
  public getVeriCode() {
    if (this.veriPhoneNumber(this.value)) {
      this.http.post(``, {}).then((response: any) => {
        if (response.status == 200) {
          this.disabled = true;
          this.timer = setInterval(() => {
            this.setCountDown();
          }, 1000);
        }
      });
    }
  }

  /**
   * 触发失焦事件
   *
   * @param {*}
   * @memberof InputBox
   */
  public onBlur(e: any) {
    this.phoneError = !this.veriPhoneNumber(e.target._value);
    this.$emit("valueChange", { name: this.name, value: e.target._value });
    this.$forceUpdate();
  }

  /**
   * 按钮提示
   *
   * @memberof Login
   */
  public getTips(): string {
    if (this.disabled) {
      return `${this.countDown}s 后获取验证码`;
    } else {
      return "获取验证码";
    }
  }
}
</script>

<style lang='less'>
@import "./app-preset-smsverification.less";
</style>